<template>
  <div class="finder">
    <div class="finder-sidebar">
      <div class="sidebar-section">
        <div class="section-title">个人收藏</div>
        <div 
          v-for="item in favorites" 
          :key="item.name"
          class="sidebar-item"
          :class="{ active: currentFolder === item.name }"
          @click="currentFolder = item.name"
        >
          <span class="item-icon">{{ item.icon }}</span>
          <span class="item-name">{{ item.name }}</span>
        </div>
      </div>

      <div class="sidebar-section">
        <div class="section-title">iCloud</div>
        <div class="sidebar-item">
          <span class="item-icon">☁️</span>
          <span class="item-name">iCloud 云盘</span>
        </div>
      </div>

      <div class="sidebar-section">
        <div class="section-title">位置</div>
        <div 
          v-for="location in locations" 
          :key="location.name"
          class="sidebar-item"
          @click="currentFolder = location.name"
        >
          <span class="item-icon">{{ location.icon }}</span>
          <span class="item-name">{{ location.name }}</span>
        </div>
      </div>
    </div>

    <div class="finder-main">
      <div class="finder-toolbar">
        <div class="toolbar-left">
          <button class="toolbar-btn">◀</button>
          <button class="toolbar-btn">▶</button>
        </div>
        <div class="toolbar-center">
          <span class="current-path">{{ currentFolder }}</span>
        </div>
        <div class="toolbar-right">
          <button class="toolbar-btn">⚙️</button>
          <button class="toolbar-btn">⊞</button>
        </div>
      </div>

      <div class="finder-content">
        <div class="file-grid">
          <div 
            v-for="file in files" 
            :key="file.name"
            class="file-item"
          >
            <div class="file-icon">{{ file.icon }}</div>
            <div class="file-name">{{ file.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const currentFolder = ref('最近使用')

const favorites = [
  { name: '最近使用', icon: '🕐' },
  { name: '应用程序', icon: '📦' },
  { name: '桌面', icon: '🖥️' },
  { name: '文稿', icon: '📄' },
  { name: '下载', icon: '⬇️' },
]

const locations = [
  { name: 'MacBook', icon: '💻' },
  { name: '网络', icon: '🌐' },
]

const files = [
  { name: '文档1.pages', icon: '📝' },
  { name: '图片.png', icon: '🖼️' },
  { name: '视频.mp4', icon: '🎬' },
  { name: '音乐.mp3', icon: '🎵' },
  { name: '文件夹', icon: '📁' },
  { name: '演示文稿.key', icon: '📊' },
  { name: '表格.numbers', icon: '📈' },
  { name: '压缩包.zip', icon: '🗜️' },
]
</script>

<style>
.finder {
  display: flex;
  height: 100%;
  background: #f5f5f7;
}

html.dark-mode .finder {
  background: #1c1c1e !important;
}

.finder-sidebar {
  width: 180px;
  background: rgba(230, 230, 235, 0.6);
  backdrop-filter: blur(20px);
  border-right: 0.5px solid rgba(0, 0, 0, 0.1);
  padding: 52px 0 12px 0;
  overflow-y: auto;
}

html.dark-mode .finder-sidebar {
  background: rgba(40, 40, 42, 0.85) !important;
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  color: #86868b;
  padding: 8px 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

html.dark-mode .section-title {
  color: #aeaeb2 !important;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 13px;
  color: #1d1d1f;
}

html.dark-mode .sidebar-item {
  color: #f5f5f7 !important;
}

.sidebar-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

html.dark-mode .sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-color);
}

.item-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

html.dark-mode .finder-main {
  background: #1c1c1e !important;
}

.finder-toolbar {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  background: rgba(250, 250, 252, 0.8);
  backdrop-filter: blur(20px);
}

html.dark-mode .finder-toolbar {
  background: rgba(50, 50, 52, 0.8) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  gap: 8px;
}

.toolbar-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s ease;
}

.toolbar-btn:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.toolbar-center {
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
}

html.dark-mode .toolbar-center {
  color: #f5f5f7 !important;
}

.finder-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 20px;
}

.file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.file-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.file-icon {
  font-size: 48px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.file-name {
  font-size: 12px;
  color: #1d1d1f;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark-mode .file-name {
  color: #f5f5f7 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .finder-sidebar {
    width: 160px;
  }
  
  .file-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 16px;
  }
  
  .file-icon {
    font-size: 40px;
  }
}
</style>

